<template>
  <el-form
    ref="activityRemarkRefForm"
    :model="activityRemarkQuery"
    label-width="120px"
    :rules="activityRemarkRules"
  >
    <el-form-item label="ID">
      <div class="desc">{{ activityDetail.id }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="负责人">
      <div class="desc">{{ activityDetail.ownerDO.name }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="活动名称">
      <div class="desc">{{ activityDetail.name }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="开始时间">
      <div class="desc">{{ activityDetail.startDate }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="结束时间">
      <div class="desc">{{ activityDetail.endDate }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="活动预算">
      <div class="desc">{{ activityDetail.cost }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="活动描述">
      <div class="desc">{{ activityDetail.description }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="创建时间">
      <div class="desc">{{ activityDetail.createTime }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="创建人">
      <div class="desc">{{ activityDetail.createByDO.name }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="编辑时间">
      <div class="desc">{{ activityDetail.editTime }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="编辑人">
      <div class="desc">{{ activityDetail.editByDO.name }}&nbsp;</div>
    </el-form-item>
    <el-form-item label="填写备注" prop="noteContent">
      <el-input
        v-model="activityRemarkQuery.noteContent"
        type="textarea"
        :rows="8"
        placeholder="请输入活动备注"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="activityRemarkSubmit">提 交</el-button>
      <el-button @click="goBack">返 回</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="activityRemarkList" :row-key="id" style="width: 100%">
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column property="noteContent" label=" 备注内容" />
    <el-table-column
      property="createTime"
      label="备注时间"
      show-overflow-tooltip
    />
    <el-table-column
      property="createByDO.name"
      width="170"
      label="备注人"
      show-overflow-tooltip
    />
    <el-table-column
      property="editTime"
      label="编辑时间"
      show-overflow-tooltip=""
    />
    <el-table-column
      property="editByDO.name"
      label="编辑人"
      show-overflow-tooltip
    />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button link type="success" @click="edit(scope.row.id)"
          >编辑</el-button
        >
        <el-button link type="danger" @click="del(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageSize"
    @prev-click="toPage"
    @next-click="toPage"
    @current-change="toPage"
  />
  <!-- 编辑弹框 -->
  <el-dialog
    v-model="activityDialogVisible"
    width="55%"
    center
    draggable
    title="修改活动备注"
  >
    <el-form
      ref="activityEditForm"
      :model="activityEditQuery"
      :rules="activityRemarkRules"
    >
      <el-form-item prop="noteContent">
        <el-input
          v-model="activityEditQuery.noteContent"
          type="textarea"
          :rows="10"
          placeholder="请输入活动备注"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="activityDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="activityEdit"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { onMounted, reactive, getCurrentInstance, ref } from "vue";
import { doGet, doPost, doPut, doDelete } from "@/http/httpRequest";
import { goBack } from "../util/util";
import { useRoute } from "vue-router";
import { messageTip, messageConfirm } from "@/util/util";
export default {
  props: ["reload"],
  setup(props) {
    let remarkTable = ref(true);
    let activityEditQuery = reactive({});
    let activityDialogVisible = ref(false);
    const route = useRoute();
    const { proxy } = getCurrentInstance();
    let pageSize = ref(0);
    let total = ref(0);
    let activityDetail = reactive({
      ownerDO: {},
      createByDO: {},
      editByDO: {},
    });
    let activityRemarkQuery = reactive({});
    onMounted(() => {
      loadActivityDetai();
      getActivityRemarkList();
    });
    //初始值设置为 [{ createByDO: {}, editByDO: {} }]，这意味着即使没有数据，数组中也包含一个空对象。
    let activityRemarkList = ref([]);
    function loadActivityDetai() {
      let id = route.params.id;
      doGet("/api/activity/" + id, {}).then((resp) => {
        if (resp.data.code === 200) {
          Object.assign(activityDetail, resp.data.data);
          console.log(activityDetail);
          if (!activityDetail.ownerDO) {
            activityDetail.ownerDO = {};
          }
          if (!activityDetail.createByDO) {
            activityDetail.createByDO = {};
          }
          if (!activityDetail.editByDO) {
            activityDetail.editByDO = {};
          }
        }
      });
    }
    goBack;
    function activityRemarkSubmit() {
      proxy.$refs.activityRemarkRefForm.validate((isValid) => {
        if (isValid) {
          doPost("/api/activity/remark", {
            activityId: route.params.id,
            noteContent: activityRemarkQuery.noteContent,
          }).then((resp) => {
            if (resp.data.code === 200) {
              messageTip("提交成功", "success");
              props.reload();
            } else {
              messageTip("提交失败", "fail");
            }
          });
        }
      });
    }
    let activityRemarkRules = reactive({
      noteContent: [
        { required: true, message: "请输入活动备注", trigger: "blur" },
        {
          min: 5,
          max: 255,
          message: "活动备注长度为5-255个字符",
          trigger: "blur",
        },
      ],
    });
    function getActivityRemarkList(current) {
      doGet("/api/activity/remark", {
        current: current,
        activityId: route.params.id,
      }).then((resp) => {
        if (resp.data.code === 200) {
          Object.assign(activityRemarkList.value, resp.data.data.list);
          if (resp.data.data.list == 0) {
          }
          activityRemarkList.length = resp.data.data.list.length;
          pageSize.value = resp.data.data.pageSize;
          total.value = resp.data.data.total;
        }
      });
    }
    function toPage(current) {
      getActivityRemarkList(current);
    }
    function edit(id) {
      activityDialogVisible.value = true;
      loadActivity(id);
    }
    function loadActivity(id) {
      doGet("/api/activity/remark/" + id, {}).then((resp) => {
        if (resp.data.code === 200) {
          Object.assign(activityEditQuery, resp.data.data);
        }
      });
    }
    function activityEdit() {
      proxy.$refs.activityEditForm.validate((isValid) => {
        if (isValid) {
          doPut("/api/activity/remark/edit", {
            id: activityEditQuery.id,
            noteContent: activityEditQuery.noteContent,
          }).then((resp) => {
            if (resp.data.code === 200) {
              messageTip("提交成功", "success");
              props.reload();
            } else {
              messageTip("提交失败", "fail");
            }
          });
        }
      });
    }
    function del(id) {
      messageConfirm("你确定要删除数据吗?")
        .then(() => {
          doDelete("/api/activity/remark/" + id, {}).then((resp) => {
            if (resp.data.code === 200) {
              messageTip("删除成功", "success");
              props.reload();
            } else {
              console.log(resp.data);
              messageTip("删除失败,原因：" + resp.data.msg, "error");
            }
          });
        })
        .catch(() => {
          messageTip("取消删除", "warning");
        });
    }
    return {
      del,
      activityEdit,
      activityDialogVisible,
      activityEditQuery,
      edit,
      activityRemarkList,
      toPage,
      pageSize,
      total,
      activityRemarkRules,
      activityRemarkSubmit,
      goBack,
      activityDetail,
      activityRemarkQuery,
    };
  },
};
</script>
